<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="分类名称" prop="name" required>
        <el-input v-model="form.name" placeholder="请输入分类名称"/>
      </el-form-item>
      <el-form-item label="上级分类" prop="pid">
        <SelectedTree
          clearable
          :tree-data="category_list"
          :default-props="{ children: 'children', label: 'label' }"
          :value="form.parent_name"
          :default-expand-all="true"
          @node-click="chooseTree"
        />
      </el-form-item>
      <el-form-item label="分类图标" prop="image" required>
        <image-upload
          :file-size="1"
          :is-multiple="false"
          :limit="1"
          :form-data="{to_table:'goods_category'}"
          :value="form.image"
          :file-type="['png', 'jpg', 'jpeg']"
          @input="afterUpload"
        ></image-upload>
        <el-input v-model="form.image" placeholder="图片"/>
        <span class="el-form-item__info">图片尺寸（1:1）：200*200</span>
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="form.sort" type="number"/>
      </el-form-item>

      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="-1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/category'
import ImageUpload from '@/components/UploadFile/image.vue'
import SelectedTree from '@/components/tools/selectedTree.vue'
import category from '@/api/category'

export default {
  components: {
    ImageUpload, SelectedTree
  },
  data() {
    return {
      category_list: [],
      form: {
        name: '',
        pid: 0,
        parent_name: '',
        sort: 10,
        image: '',
        status: 1
      }
    }
  },

  mounted() {
    if (this.$route.query.hasOwnProperty('id')) {
      this.getData(this.$route.query.id)
    }
    this.getCategoryList()
  },

  methods: {
    afterUpload(list) {
      if (!list) return
      const file = list[0]
      if (file) {
        this.form.image = file.url
      }
    },
    getData(id) {
      api.info({ id: id }).then((res) => {
        this.form = res.data.info
      })
    },
    getCategoryList() {
      category.list_options({}).then(res => {
        this.category_list = res.data.list
      })
    },
    // 选择分类
    chooseTree(data) {
      console.log(data)
      this.form.pid = data.id
      this.form.parent_name = data.label
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let req
          if (this.form.category_id > 0) {
            req = api.update(this.form)
          } else {
            req = api.create(this.form)
          }
          req.then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
              duration: 500,
              onClose: () => {
                this.$router.go(-1)
              }
            })

          }).catch((error) => {

          })
        }
      })

    }
  }
}
</script>

<style scoped>

</style>

